<template>
	<view class="select-city-wrap">
		<view class="head l-fjb" :style="{height:titleHeight+'px',lineHeight: naviBarHeight+'px',paddingTop: statusBarHeight+'px'}">
			<view class="del" :style="{lineHeight:naviBarHeight+'px'}" @click="chooseCity(1)">取消</view>
			<view class="title">选择城市</view>
			<view class="rigth-btn" :style="{lineHeight:naviBarHeight+'px'}" @click="chooseCity(2)">确定</view>
		</view>
		<view class="select-city">
			<view class="index-bg-view">
				<view class="index" @touchmove="touchMoveIndex">
					<view class="index-item" @click="scrollTo('#')">#</view>
					<view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{ item.letter }}</view>
				</view>
			</view>
			<scroll-view :scroll-into-view="scrollIntoId" @scroll="scrollChange" :scroll-y="true" :scroll-with-animation="isAnimation" :style="{ height: windowHeight+'px' }">
				<view class="content">
					<view class="section" id="current">
						<view class="city-title">当前城市</view>
						<view class="city-list">
							<view @click="onSelect(currentCity)" :class="{ active: current === currentCity }" class="city-item" style="display: flex; justify-content: center; align-items: center;">
								<image
									style="margin-right: 12rpx; width: 40rpx; height: 40rpx;"
									src="/static/nav_icon_dw@3x.png"
									mode="aspectFit"
								></image>
								{{ currentCity }}
							</view>
						</view>
					</view>
					<view class="section" id="hot" v-if="hotCitys.length">
						<view class="city-title">热门城市</view>
						<view class="city-list">
							<view class="city-item" :class="{ active: current === item }" v-for="(item, i) in hotCitys" :key="i" @click="onSelect(item)">{{ item }}</view>
						</view>
					</view>
					<view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
						<view class="letter">{{ item.letter }}</view>
						<view class="city-list">
							<view class="city-item" :class="{ active: current === item }" v-for="(item, itemIndex) in item.list" :key="itemIndex" @click="onSelect(item)">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import Citys from './citys';
export default {
	props: {
		hotCitys: {
			type: Array,
			default() {
				return [];
			}
		},
		value: {
			type: String,
			default: ''
		},
		locationValue: {
			type: String,
			default: ''
		},
		currentCity: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			citys: Citys,
			windowHeight: '',
			scrollIntoId: 'F',
			current: this.value,
			itemBounds: {},
			marginTopHeight: 0,
			isAnimation: true,
			query: null,
			titleHeight: '',
			naviBarHeight: '',
			statusBarHeight: '',
		};
	},
	mounted() {
		this.getSystemInfo();
	},
	created() {
		let that = this;
		// 全局定义的监听事件
		uni.$on('upadteLoaction', function(city) {
			that.current = city;
			console.log(city);
		});
		let storageHeight = uni.getStorageSync('storageHeight');
		this.titleHeight = storageHeight.titleHeight;
		this.naviBarHeight = storageHeight.naviBarHeight;
		this.statusBarHeight = storageHeight.statusBarHeight
		console.log(storageHeight.naviBarHeight,storageHeight.statusBarHeight)
	},
	beforeDestroy() {
		// 用完后移除自定义监听事件
		uni.$off(['upadteLoaction']);
	},
	methods: {
		scrollChange: function(e) {
		},
		// 获取导航栏的高度
		getItemHeight: function() {
			let that = this;
			this.query = uni.createSelectorQuery().in(this);
			this.query
				.select('.index-item')
				.boundingClientRect(data => {
					let itemW = data.width;
					let itemH = data.height;
					// 索引的宽高
					that.itemBounds = {
						width: itemW,
						height: itemH
					};
				})
				.exec();
			this.query
				.select('.index')
				.boundingClientRect(data => {
					console.log(data);
					console.log(this.windowHeight);
					console.log(data.height); // 索引总高度
					this.marginTopHeight = (parseInt(this.windowHeight) - parseInt(this.naviBarHeight) - parseInt(data.height)) / 2;
					console.log(this.marginTopHeight);
				})
				.exec();
			this.query //坐标
				.select('.letter')
				.boundingClientRect(data => {
					console.log(data);
					
				})
				.exec();
		},
		getSystemInfo() {
			uni.getSystemInfo().then(res => {
				let [error, data] = res;
				this.windowHeight = data.windowHeight - this.naviBarHeight - this.statusBarHeight;
				this.getItemHeight();
			});
		},

		scrollTo(letter) {
			console.log(letter);
			this.isAnimation = false;
			this.scrollIntoId = letter === '#' ? 'current' : letter;
		},
		//确定和取消
		chooseCity(i){
			let data = {
				type: false,
				city: this.current
			}
			if(i == 1) {
				data.city = this.locationValue
				this.$emit('chooseCity', data);
			}else{
				this.$emit('chooseCity', data);
			}
		},
		//选中城市
		onSelect(e) {
			console.log(e);
			this.current = e;
		},

		touchMoveIndex: function(e) {
			let info = e.changedTouches[0];
			// console.log('开始移动点：' + info.pageY);
			let itemY = info.pageY - this.marginTopHeight;
			var count = Math.ceil(itemY / this.itemBounds.height);
			if (count == 1) {
				this.isAnimation = true;
				this.scrollIntoId = 'current';
				return;
			}
			// console.log(count);
			if (count > 23) {
				return
			}
			if (count - 1 > 0) {
				count = count - 1;
			}
			let item = this.citys[count - 1];
			if (this.scrollIntoId == item.letter) {
				return;
			}
			// console.log(item.letter);
			this.isAnimation = true;
			this.scrollIntoId = item.letter === '#' ? 'current' : item.letter;
		}
	}
};
</script>


<style lang="scss" scoped>
.select-city-wrap {
	position: fixed;top: 0;left: 0;z-index: 999;
	padding: 0;
	background-color: rgba(34, 33, 33, 1);
	.head{
		color: #333;padding: 0 30rpx;background-color: #fff;font-size: 28rpx;
		.per{
			width: 100rpx;height: 100%;text-align: center;
		}
		.del{
			@extend .per
		}
		.rigth-btn{
			@extend .per;
			color: #007AFF;
		}
		.title{
			font-size: 16px;
		}
	}
}

.index-item {
	width: 60rpx;
	height: 42rpx;
	line-height: 42rpx;
	text-align: center;
}

.select-city {
	padding: 0 30rpx;
	.index-bg-view {
		position: absolute;
		right: 10rpx;
		z-index: 999;

		height: 100%;
		width: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.index {
		color: rgba(255, 255, 255, 0.5);
		font-size: 32rpx;
	}

	.section {
		margin-bottom: 19rpx;
		.city-title {
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			margin-bottom: 28rpx;
			margin-top: 30rpx;
		}

		.letter {
			width: 44rpx;
			height: 44rpx;
			color: #fff;
			font-weight: bold;
			// border-radius: 100%;
			// background-color: #2f9bfe;
			font-size: 28rpx;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.city-list {
			display: flex;
			flex-wrap: wrap;

			.city-item {
				width: 200rpx;
				height: 64rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				line-height: 64rpx;
				text-align: center;
				// border: 1px solid #dcdcdc;
				border-radius: 8rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				background-color: rgba(255, 255, 255, 0.1);

				// 选中状态
				&.active {
					background-color: rgba(247, 70, 104, 1);
					// border-color: #2f9bfe;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
}
</style>
